import type { TableProps } from 'antd';
import { Button, Space, Table } from 'antd';
import type {
  ColumnsType,
  FilterValue,
  SorterResult,
} from 'antd/es/table/interface';
import React, { useState } from 'react';
import moment from 'moment';

export default () => {
  interface DataType {
    key: string;
    name: string;
    submissionDate: any;
    address: string;
  }

  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      submissionDate: '2016-02-07T06:10:10.000+0000',
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      submissionDate: '2020-02-15T06:10:10.000+0000',
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      submissionDate: '2021-01-07T09:48:49.000+0000',
      address: 'Sydney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      submissionDate: '2022-01-07T09:48:49.000+0000',
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      submissionDate: '2022-01-07T09:48:49.000+0000',
      address: 'London No. 2 Lake Park',
    },
  ];

  const [filteredInfo, setFilteredInfo] = useState<
    Record<string, FilterValue | null>
  >({});
  const [sortedInfo, setSortedInfo] = useState<SorterResult<DataType>>({});

  const handleChange: TableProps<DataType>['onChange'] = (
    pagination,
    filters,
    sorter,
  ) => {
    console.log('Various parameters', pagination, filters, sorter);
    setFilteredInfo(filters);
    setSortedInfo(sorter as SorterResult<DataType>);
  };

  const clearFilters = () => {
    setFilteredInfo({});
  };

  const clearAll = () => {
    setFilteredInfo({});
    setSortedInfo({});
  };

  const setAgeSort = () => {
    setSortedInfo({
      order: 'descend',
      columnKey: 'submissionDate',
    });
  };

  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      filters: [
        { text: 'Joe', value: 'Joe' },
        { text: 'Jim', value: 'Jim' },
      ],
      filteredValue: filteredInfo.name || null,
      onFilter: (value: string, record) => record.name.includes(value),
      sorter: (a, b) => a.name.length - b.name.length,
      sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
      ellipsis: true,
    },
    {
      title: 'submissionDate',
      dataIndex: 'submissionDate',
      key: 'submissionDate',
      sorter: (a, b) =>
        new Date(moment(a.submissionDate).format('L')).getTime() -
        new Date(moment(b.submissionDate).format('L')).getTime(),
      //   sorter: true,

      sortOrder:
        sortedInfo.columnKey === 'submissionDate' ? sortedInfo.order : null,
      ellipsis: true,
      render: (bb) => {
        // console.log('bb', bb);
        return moment(bb).format('L');
      },
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      filters: [
        { text: 'London', value: 'London' },
        { text: 'New York', value: 'New York' },
      ],
      filteredValue: filteredInfo.address || null,
      onFilter: (value: string, record) => record.address.includes(value),
      sorter: (a, b) => a.address.length - b.address.length,
      sortOrder: sortedInfo.columnKey === 'address' ? sortedInfo.order : null,
      ellipsis: true,
    },
  ];

  return (
    <>
      <Space style={{ marginBottom: 16 }}>
        <Button onClick={setAgeSort}>Sort submissionDate</Button>
        <Button onClick={clearFilters}>Clear filters</Button>
        <Button onClick={clearAll}>Clear filters and sorters</Button>
      </Space>
      <Table
        columns={columns}
        dataSource={data}
        onChange={handleChange}
        rowKey={'key'}
      />
    </>
  );
};
